/* eslint-disable prefer-rest-params */
/* eslint-disable no-plusplus */
import './css/preview.less';

// // 图片预览
// ;(function () {
// 当前地址
let currentUrl = '';
// 图片地址数组
let urls = [];
// 元素
let $ele = null;
// 窗口是否打开
let open = false;
// 当前位置
let current = 0;
// 图片预览是否已经加载过
let isLoad = false;

const BILI = 2;
// 渲染

const slider = {
    prev() {
        current--;
        if (current < 0) {
            current = urls.length - 1;
        }
        this.go(current);
    },
    next() {
        current++;
        if (current >= urls.length) {
            current = 0;
        }
        this.go(current);
    },
    go(curr) {
        const $current = $ele.find('.img-item').eq(curr);
        const src = urls[curr].replace(/\/w\/[0-9]+$/, '');

        $current
            .addClass('show')
            .siblings()
            .removeClass('show');
        $ele.find('.status').text(`${curr + 1}/${urls.length}`);

        this.loadImg(src, (width, height) => {
            if (height / width < BILI) {
                $current.addClass('center');
            }
            $current.find('img').attr('src', src);
        });
    },
    loadImg(src, callback) {
        const $img = new Image();
        $img.onload = function () {
            const width = $img.width;
            const height = $img.height;
            callback(width, height);
        };

        $img.src = src;

        if ($img.width || $img.complete) {
            callback($img.width, $img.height);
        }
    },
    render() {
        const urlsList = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];
        const html = urlsList
            .map((url, index) => {
                if (url === currentUrl) {
                    current = index - 1;
                }
                return '<div class="img-item"><img src="" alt="" /></div>';
            })
            .join('');

        $ele.find('.img-list').html(html);
        slider.next();
        // 显示图片预览
        $ele.show();
        open = true;
    },
};

// 模板
const TEMPLATE = '<div id="wx-previewImage">'
    + '<div class="wx-pI-layer">'
    + '<div class="close"></div>'
    + '<p class="status"></p>'
    + '<div class="wx-pI-main">'
    + '<div class="img-list"></div>'
    + '</div>'
    + '</div>'
    + '</div>';

// 复写previewImage
export default function (args) {
    currentUrl = args.current;
    urls = args.urls || [currentUrl];

    // 初始化
    if (!isLoad) {
        // $('head').append('<style>' + STYLE + '</style>');
        $('body').append(TEMPLATE);
        isLoad = true;
        $ele = $('#wx-previewImage');

        $ele.on('mousemove', '.img-list', function (event) {
            // 修改光标icon
            const cursor = event.clientX / $(window).width() > 0.5
                ? `url(${WPT.CDNURL}res/js/plugin/img/pic_next.cur), pointer`
                : `url(${WPT.CDNURL}res/js/plugin/img/pic_prev.cur), pointer`;
            $(this).css('cursor', cursor);
        })
            .on('click', '.img-list', (event) => {
                // 上一个/下一个
                event.pageX / $ele.find('.wx-pI-layer').width() > 0.5 ? slider.next() : slider.prev();
            })
            .on('click', '.close', () => {
                // 关闭图片预览
                $ele.hide();
                open = false;
            });

        const $fuck = $ele.find('.wx-pI-main')[0];

        $(window).on('wheel', (event) => {
            if (!open) return;

            if (
                ($fuck.scrollTop == 0 && event.deltaY < 0)
                || ($fuck.scrollTop + 1 >= $fuck.scrollHeight - $fuck.clientHeight && event.deltaY > 0)
            ) {
                event.preventDefault();
            }
        });

        $(window).on('keyup', (event) => {
            if (!open) return;

            const keycode = event.keyCode;
            if (keycode == 37) {
                slider.prev();
            } else if (keycode == 39) {
                slider.next();
            } else if (keycode == 27) {
                $ele.find('.close').click();
            }
        });
    }

    // 渲染界面
    slider.render(urls);
}

// })();
